<template>
  <div>
    <en-table-layout :tableData="tableData" :height="tableHeight" :loading="loading">
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-btns">
          <div>
            <!-- <el-button size="mini" type="primary">导出任务</el-button> -->
          </div>
          <div class="toolbar-search">
            <!-- 顶部搜索栏 -->
            <en-table-search
              @search="searchEvent"
              @advancedSearch="advancedSearchEvent"
              advanced
              advancedWidth="455"
              placeholder="请输入关键字">
              <template slot="advanced-content">
                <el-form ref="advancedForm" :model="advancedForm"  label-width="80px">        
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="任务类型">
                        <el-select v-model="advancedForm.mission_type" placeholder="请选择任务类型" clearable>
                          <el-option label="每日任务" :value="0"></el-option>
                          <el-option label="每月任务" :value="1"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>       
                </el-form>
              </template>
            </en-table-search>
          </div>     
        </div>
      </div>
      <template slot="table-columns">
        <!-- <el-table-column type="selection" min-width="10" /> -->
        <el-table-column prop="mission_type" label="任务类型" min-width="120" >
          <template slot-scope="{ row }">
            <span>{{ row.mission_type == 0 ? '每日任务' : '每月任务' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mission_time" label="任务区间" min-width="120">
          <template slot-scope="{ row }">
            <span>{{ row.mission_time | unixToDate('MM-dd') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="member_name" label="团长姓名" min-width="120" />
        <el-table-column prop="leader_mobile" label="团长手机号" min-width="120" />    
        <el-table-column prop="mission_target" label="任务指标" min-width="150" >
          <template slot-scope="{ row }">
            <span>{{row.mission_target == 0 ? '下单人数' : '成交金额'}}</span>
          </template>
        </el-table-column>    
        <el-table-column prop="target_value" label="目标值" min-width="120" />
        <el-table-column prop="complete_value" label="完成值" min-width="120" />      
        <el-table-column prop="level1_status" label="阶梯一" min-width="120" >
          <template slot-scope="{ row }">
            <span :class="row.level1_status == 0 ? 'color_red' : 'color_success'">{{ row.level1_status == 0 ? '未完成' : '已完成' }}</span>
          </template>
        </el-table-column>  
        <el-table-column prop="level2_status" label="阶梯二" min-width="120" >
          <template slot-scope="{ row }">
            <span :class="row.level2_status == 0 ? 'color_red' : 'color_success'">{{ row.level2_status == 0 ? '未完成' : '已完成' }}</span>
          </template>
        </el-table-column>      
        <el-table-column prop="level3_status" label="阶梯三" min-width="120" >
          <template slot-scope="{ row }">
            <span :class="row.level3_status == 0 ? 'color_red' : 'color_success'">{{ row.level3_status == 0 ? '未完成' : '已完成' }}</span>
          </template>
        </el-table-column>      
        <el-table-column prop="level4_status" label="阶梯四" min-width="120" >
          <template slot-scope="{ row }">
            <span :class="row.level4_status == 0 ? 'color_red' : 'color_success'">{{ row.level4_status == 0 ? '未完成' : '已完成' }}</span>
          </template>
        </el-table-column>                                                                                                                                   
      </template>
      <el-pagination v-if="tableData" slot="pagination"
        @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange"
        :current-page="params.page_no" :page-sizes="[10, 20, 50, 100]" :page-size="params.page_size"
        layout="total, sizes, prev, pager, next, jumper" :total="data_total">
      </el-pagination>
    </en-table-layout>
  </div>
</template>

<script>
import * as API_Leader from '@/api/leader.js'

export default {
  name: 'leaderTask',
  data() {
    return {
      advancedForm: {
        mission_type: undefined
      },
      /** 列表loading状态 */
      loading: false,
      tableData: [],
      /** 列表参数 */
      params: {
        page_no: 1,
        page_size: 10
      },
      data_total: 0
    }
  },
  computed: {
    tableHeight (){
      return document.documentElement.clientHeight - 246 + 'px';
    }
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    getDataList() {
      this.loading = true;
      API_Leader.getQueryMissionScheduleList(this.params)
        .then(response => {
          this.tableData = response.data;
          this.data_total = response.data_total;
          this.loading = false;
        })
        .catch(error => {
          console.log(error)
          this.loading = false;
        })
    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size;
      this.getDataList();
    },

    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page;
      this.getDataList();
    },
    searchEvent() {

    },
    advancedSearchEvent() {
      this.params = {
        ...this.params,
        ...this.advancedForm
      }
      this.params.page_no = 1;
      this.getDataList();
    }
  }
}
</script>
<style type='text/scss' lang='scss' scoped>
.toolbar-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-input__inner {
  width: 100%;
}
.color_red {
  color: #dc143C;
}
.color_success {
  color: #00FF7F;
}
</style>
